import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Row,
  Col,
  Checkbox,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  // const [fileList,setfileList] = useState([]);
  const [measureClassData, setmeasureClassData] = useState([]);
  const { setFieldsValue, resetFields } = form;
  const [accessibleUsersList, setaccessibleUsersList] = useState([]);
  const [treeList, settreeList] = useState([]);
  const [code, setCode] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const { TextArea } = Input;
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    setaccessibleUsersList([]);
    resetFields();
    props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    let accessibleUsersListparams = accessibleUsersList.map((e) => { return { id: e } })
    let params = {
      "userId": code,
      "accessibleUsersList": accessibleUsersListparams
    }
    console.log(params);
    request('/sys/user-scope-map/save', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: params,
    }).then((res) => {
      message.success(res?.meta?.msg);
      setIsModalVisible(false);
      handleCancel();
    });
  };
  const getAllList = () => {
    request('/sys/account/findDeptTreeList', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {},
    }).then((res) => {
      let data = res?.data || [];
      settreeList(data);
    });
  }
  const getDetail = (id: any) => {
    request('/sys/user-scope-map/findDataList', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        "userId": id,
      },
    }).then((res) => {
      // setFieldsValue(res?.data);
      let data = res?.data || [];
      let accessibleUsersListn = data.map((e: any) => { return e.accessibleUsersId })
      console.log(accessibleUsersListn);
      setaccessibleUsersList(accessibleUsersListn);
      showModal();
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any, record: any) => {
      if (id) {
        setCode(id);
        getDetail(id);
      } else {
        resetFields();
        showModal();
      }
      getAllList();
      // setfileList([]);
    },
  }));

  return (
    <Modal
      title={code === '' ? '新增' : '编辑'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1000}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
    >
      <Form form={form} layout="vertical" {...modalLayoutSm}>
        <Row>
          <Col span={24}>
            <Form.Item
              label="人员"
              name="value"
              rules={[{ required: true, message: '请输入字典key!' }]}
            >
              <div style={{ display: 'none' }}>{JSON.stringify(accessibleUsersList)}</div>
              <Checkbox.Group value={accessibleUsersList} onChange={(vals) => setaccessibleUsersList(vals)}>

                {
                  treeList.map((e: any, i) => {
                    let users = e?.childrens || [];
                    return <div key={i}>
                      <div>{e.name}</div>
                      <div>
                        {
                          users.map((ej: any, ij: number) => {
                            return <Checkbox key={ij} value={ej.id}>{ej.name}</Checkbox>
                          })
                        }
                      </div>
                    </div>
                  })
                }
              </Checkbox.Group>

            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
